<template>
  <div class="home">
    <HeaderLogin />

    <div class="login" v-if="isHasName">
      <div class="login-header">
        <img src="@/assets/loginlogo.png" alt="" />
      </div>
      <div class="login-text">2025 Maritime Silk Road Port</div>
      <div class="login-text">Cooperation Forum</div>
      <el-form ref="formRegister" class="login-form" :model="formRegister" :rules="formRegisterRules">
        <el-form-item prop="email">
          <el-input v-model="formRegister.email" placeholder="Create a profile with your email *"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="formRegister.password" placeholder="Create Password *"></el-input>
        </el-form-item>
        <el-form-item prop="password2">
          <el-input v-model="formRegister.password2" placeholder="Confirm Password *"></el-input>
        </el-form-item>
      </el-form>
      <el-button class="login-contentBtn" round @click="submitRegister">Register Now</el-button>
    </div>

    <div class="login" v-if="isLogin">
      <div class="login-header">
        <img src="@/assets/loginlogo.png" alt="" />
      </div>
      <div class="login-text">2025 Maritime Silk Road Port</div>
      <div class="login-text">Cooperation Forum</div>
      <el-form ref="formLogin" class="login-form" :model="formLogin" :rules="formLoginRules">
        <el-form-item prop="email">
          <el-input v-model="formLogin.email" placeholder="E-mail"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="formLogin.password" placeholder="Password"></el-input>
        </el-form-item>
      </el-form>
      <el-button class="login-contentBtn" round @click="submitLogin">CONTINUE</el-button>
    </div>

    <div class="login" v-if="isHas">
      <div class="login-header">
        <img src="@/assets/loginlogo.png" alt="" />
      </div>
      <div class="login-text">2025 Maritime Silk Road Port</div>
      <div class="login-text">Cooperation Forum</div>
      <el-form class="login-form" :model="form" :rules="formRules">
        <el-form-item prop="email">
          <el-input style="color: red" v-model="form.email" :placeholder="inputPlace"></el-input>
        </el-form-item>
      </el-form>
      <ul class="login-tips">
        <li>Create a profile with your emai</li>
      </ul>
      <el-button class="login-contentBtn" round>CONTINUE</el-button>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import HeaderLogin from '@/components/HeaderLogin';
import Header from '@/components/Header';

export default {
  components: {
    HeaderLogin,
    Header
  },
  data() {
    return {
      inputPlace: 'E-mail',
      form: {
        email: ''
      },
      formRules: {
        email: [{ required: true, message: 'Please input your email address', trigger: 'blur', type: 'email' }]
      },

      formRegister: {
        email: '',
        password: '',
        password2: ''
      },
      formRegisterRules: {
        email: [{ required: true, message: 'Please input your email address', trigger: 'blur', type: 'email' }],
        password: [{ required: true, message: 'Please input your password', trigger: 'blur' }],
        password2: [{ required: true, message: 'Please input your password', trigger: 'blur' }]
      },

      formLogin: {
        email: '',
        password: ''
      },
      formLoginRules: {
        email: [{ required: true, message: 'Please input your email address', trigger: 'blur', type: 'email' }],
        password: [{ required: true, message: 'Please input your password', trigger: 'blur' }]
      },
      isHasName: true,
      isLogin: false,
      isHas: false
    };
  },
  methods: {
    submitRegister() {
      this.$refs.formRegister.validate((valid) => {
        if (valid) {
          this.isHasName = false;
          this.isLogin = true;
        } else {
          return false;
        }
      });
    },
    submitLogin() {
      this.$refs.formLogin.validate((valid) => {
        if (valid) {
          this.isLogin = false;
          this.isHas = true;
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.home {
  background-image: url('@/assets/bg.png');
  background-size: 100% 100%;
  height: 100vh;
  .login {
    width: 450px;
    margin: auto;
    background: #f1f1f1;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 50px;
    &-header {
      height: 60px;
      width: 43%;
      margin-bottom: 20px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    &-text {
      font-weight: bold;
      margin-bottom: 2px;
    }
    &-form {
      width: 70%;
      margin: 20px 0;
    }
    &-contentBtn {
      margin-top: 40px;
      width: 70%;
      background: #22ac38;
      color: #fff;
    }
    &-tips {
      text-align: left;
      color: #c1c1c2;
      font-size: 14px;
      transform: translateX(-22%);
    }
  }
}
</style>
